{% extends "myapp/hat.html" %}
{% load static %}
{% block content %}


{#<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>#}
<script src="https://use.fontawesome.com/27c34d562b.js"></script>
<link rel="stylesheet" href="{%  static 'myapp/css/bootstrap-treefy.css' %}"/>
<script src="{%  static 'myapp/js/bootstrap-treefy.js' %}"></script>
<script src="{%  static 'myapp/js/javascript.js' %}"></script>

<div class="container">

<br>
<div class="d-flex flex-row">

 <div class="p-2">
    <p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Добавить правило выгрузки
  </button>
    </p></div>
     </div>
<div class="d-flex justify-content-center" id="load">
</div>

    <script>$(function(){
$('a').click(function(){
     $('<div class="spinner-border" role="status"></div>')
         .prependTo("#load");
  });
});</script>

    </div>
<div class="collapse" id="collapseExample">
<form action="" method="post">
    {% csrf_token %}
    <table>
    {{ form }}
    </table>
    <input type="submit" value="Submit" />
    </form>
</div>


{% if sdrs_all.count > 0 %}

    {% regroup sdrs_all by wbs_code as myList %}

    <h2>Список правил выгрузки</h2>
    <table class="table table-striped" id="table">
    <thead>
        <tr>
            <th scope="col" >WBS code</th>
            <th scope="col">Docsdiv</th>
            <th scope="col" >WBS1</th>
            <th scope="col">WBS2</th>
            <th scope="col" >WBS3</th>
            <th scope="col">Specs</th>
        </tr>
    </thead>
    <tbody>

        {% for grouper, sdr in myList %}

            <tr data-node="treetable-{{ grouper }}"><td>{{ grouper }}</td></tr>
            {% for el in sdr %}

            <tr data-node="treetable-999" data-pnode="treetable-parent-{{ grouper }}">
                <td class="">{{ el.wbs_code }}</td><td class="">{{ el.docsdiv }}</td><td class="">{{ el.wbs1 }}</td>
            <td class="">{{ el.wbs2 }}</td><td class="">{{ el.wbs2 }}</td><td class="">{{ el.specs }}</td>
            <td><a href="/sdr_choose/{{el.id}}">Выбрать</a></td>
                    <td><a href="/sdr/{{el.id}}">Изменить</a></td>
                    <td><a href="/sdr_delete/{{el.id}}">Удалить</a></td>
            </tr>

            {% endfor %}
        {% endfor %}
    <tr><td><a href="/sdr_choose/0">Выбрать всё</a></td></tr>
    </tbody>
    </table>
    {% endif %}



</div>

<!--<script>$(function(){-->
<!--$('a').click(function(){-->
<!--     $('<div class="spinner-border" role="status"></div>')-->
<!--         .prependTo("#load");-->
<!--  });-->
<!--});</script>-->

<script>$("#table").treeFy({

// Custom template
expanderTemplate: '<span class="treetable-expander"></span>',
indentTemplate: '<span class="treetable-indent"></span>',

// CSS classes for expander
expanderExpandedClass: 'fa fa-angle-down',
expanderCollapsedClass: 'fa fa-angle-right',

// Index of the column which expander should be added to.
treeColumn: 0,

// Initial CSS class
initStatusClass: 'treetable-expanded'

});
</script>


{% endblock %}